<template>
  <ga-modal v-model:visible="visible" :width="520" @close="handleCancel(formRef)">
    <template #title>安装AGENT</template>
    <ga-spin style="width: 100%" :loading="loading">
      <ga-form ref="formRef" :model="formData">
        <ga-form-item
          field="bkBizId"
          label="蓝鲸业务"
          label-col-flex="100px"
          :rules="[RULE.NOT_NULL]"
          :validate-trigger="['change', 'input']"
        >
          <ga-select
            allow-search
            allow-clear
            v-model="formData.bkBizId"
            placeholder="选择蓝鲸业务"
          >
            <ga-option
              v-for="(item, idx) in bkBizList"
              :key="idx"
              :label="item.bkBizName"
              :value="item.bkBizId"
            />
          </ga-select>
        </ga-form-item>
        <ga-form-item
          field="osType"
          label="操作系统类别"
          label-col-flex="100px"
          :rules="[RULE.NOT_NULL]"
          :validate-trigger="['change', 'input']"
        >
          <ga-select v-model="formData.osType" placeholder="选择操作系统类别">
            <ga-option
              v-for="(item, idx) in osTypeList"
              :key="idx"
              :label="item.dictLabel"
              :value="item.dictValue"
            />
          </ga-select>
        </ga-form-item>
        <ga-form-item
          field="username"
          label="登录账号"
          label-col-flex="100px"
          :rules="[RULE.NOT_NULL]"
          :validate-trigger="['change', 'input']"
        >
          <ga-input v-model="formData.username" placeholder="请输入内容" />
        </ga-form-item>
        <ga-form-item
          field="password"
          label="密码"
          label-col-flex="100px"
          :rules="[RULE.NOT_NULL]"
          :validate-trigger="['change', 'input']"
        >
          <ga-input-password v-model="formData.password" placeholder="请输入密码" />
        </ga-form-item>
      </ga-form>
    </ga-spin>
    <template #footer>
      <ga-button @click="visible = false">取消</ga-button>
      <ga-button type="primary" @click="handleOk" :loading="okLoading"> 确定 </ga-button>
    </template>
  </ga-modal>
</template>
<script setup>
import { ref, h, reactive } from "vue";
import { createSnapshot } from "@/api/vm";
import { byDictToList } from "@/api/dataDictionary";
import { getBkBizList } from "@/api/pluginMgmt";
import { RULE } from "@/constant/validators";
import useLoading from "@/hooks/loading";
import { imageTypeList } from "@/constant";

const { loading, setLoading } = useLoading(false);
const formRef = ref(null);
const okLoading = ref(false);
const formData = reactive({
  bkBizId: "",
  osType: "",
  username: "",
  password: "",
});
const visible = ref(false);
const curId = ref("");
const osTypeList = ref([]);
const bkBizList = ref([]);
// 获取操作类型列表
const fetchosData = async () => {
  try {
    const { data } = await byDictToList({ dictType: "os_type", limit: -1 });
    osTypeList.value = data?.items || [];
  } finally {
    setLoading(false);
  }
};
// 蓝鲸业务列表
const fetchBkBizListData = async () => {
  try {
    const { data } = await getBkBizList({ limit: -1 });
    bkBizList.value = data || [];
  } catch (error) {
    console.log(error);
  }
};
const open = async (record) => {
  visible.value = true;
  fetchBkBizListData();
  fetchosData();
  if (record && record?.id) {
    setLoading(true);
    curId.value = record.id;
    // Object.keys(formData).forEach((item) => {
    //   formData[item] = record[item];
    // });
  }
};
// 保存
const emits = defineEmits(["fetchData"]);
const handleOk = async () => {
  const res = await formRef.value?.validate();
  if (!res) {
    okLoading.value = true;
    // try {
    //   const obj = formatVpcCreateParams(type, formData, tableData.value);
    //   const { code } = await createSnapshot(obj, "network-vpc");
    //   if (code === 20000) Message.success("操作成功");
    //   emits("fetchData");
    //   visible.value = false;
    // } finally {
    //   okLoading.value = true;
    // }
  }
};
const handleCancel = (formEl) => {
  curId.value = "";
  formEl.resetFields();
};
defineExpose({ open });
</script>
